<template>

    <div>
        <van-nav-bar title="支付方式" left-arrow @click-left="backUp"/>
        <div class="weixin-tip">
            <p>
                <img src="../../assets/imgList/live_weixin.png" alt="微信打开" width="100%"/>
            </p>
        </div>
        <main>
            <section class="order-info">
                <p style="text-align: center">订单编号：{{orderInfo.orderNo}}</p>
                <p style="text-align: center;margin-top: 20px">订单金额</p>
                <h4>&yen;{{format(orderInfo.payment)}}</h4>
            </section>
            <button @click="pay">微信支付</button>
        </main>
    </div>
</template>
<script>
    import {RadioGroup, Radio, Cell, CellGroup} from "vant";
    import api from "@/utils/restful.js";
    import axios from "axios";

    export default {
        components: {
            [RadioGroup.name]: RadioGroup,
            [Radio.name]: Radio,
            [CellGroup.name]: CellGroup,
            [Cell.name]: Cell
        },
        data() {
            return {
                // wx: null,
                orderInfo: {
                    orderNo: this.$route.params.orderInfo.orderNo,
                    payment: this.$route.params.orderInfo.paymentPrice,
                    returnUrl: this.$route.params.orderInfo.returnUrl
                },
            };
        },
        created() {
            let params = {
                url: 'http://city.asrobot.cn/'
            };
            const instance = axios.create({});
            instance({
                method: "post",
                url: api.wxPayConfig,
                params: params
            }).then(res => {
                console.log(res);
                let content = res.data;
                params.nonceStr = content.nonceStr;
                params.signature = content.signature;
                params.timestamp = content.timestamp;
                params.appId = content.appId;
                params.debug = false;
                params.jsApiList = ['chooseWXPay'];
                console.log(params);
                wx.config(params);
                wx.ready(() => {
                });
                wx.error(function (res) {
                    console.info('error 验证失败', res);
                });
            });

        },

        mounted() {
        },
        methods: {
            backUp() {
                this.$router.push({path:this.orderInfo.returnUrl});
            },
            pay() {
                const instance = axios.create({});
                instance({
                    method: "post",
                    url: api.transactionPay,
                    params: {
                        orderNo: this.orderInfo.orderNo,
                        code: localStorage.getItem("openId")
                    }
                }).then(res => {
                    console.log(res);
                    if (res) {
                        wx.chooseWXPay({
                            timestamp: res.data.timeStamp, // 支付签名时间戳，注意微信js sdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                            nonceStr: res.data.nonceStr, // 支付签名随机串，不长于 32 位
                            package: 'prepay_id=' + res.data.prepayId, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
                            signType: res.data.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                            paySign: res.data.sign, // 支付签名
                            success: function () {
                                this.$toast("订单支付成功");
                                this.$router.push({path:this.orderInfo.returnUrl});
                            },
                            fail: function () {
                                this.$toast("订单支付失败")
                            },
                            cancel: function () {
                                console.info('取消支付，如需支付请继续。');
                            }
                        });
                    }
                });
            },
            format(price) {
                return ((price * 100) / 100).toFixed(2);
            },


        }
    };
</script>
<style lang="less" scoped>
    @import "~style/common.less";

    main {
        height: calc(100vh - 50px);
    }

    .order-info {
        margin-top: 1px;
        padding: 15px 21px 32px;
        box-sizing: border-box;
        height: 190px;
        background-color: @bgColor;

        p {
            .font-dpr(14px);
            color: @fontColorH3;
        }

        h4 {
            margin-top: 21px;
            color: #ec6e6b;
            text-align: center;
            .font-dpr(24px);
        }
    }

    .weixin-tip {
        display: none;
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.8);
        filter: alpha(opacity=80);
        height: 100%;
        width: 100%;
        z-index: 100;
    }

    .weixin-tip p {
        text-align: center;
        margin-top: 10%;
        padding: 0 5%;
    }

    .van-cell-group {
        margin-top: 2px;
        background-color: @borderColor;
        .flexbox();
        // border: 1px solid red;
        .van-cell {
            .flexbox(center, center, row, nowrap);

            img {
                width: 120px;
                height: 40px;
                position: relative;
                left: 50%;
                transform: translateX(-50%);
            }
        }

        .van-cell + .van-cell {
            margin-left: 2px;
        }

        .van-radio {
            margin-top: 5px;
            text-align: center;
            // border: 1px solid blue;
            &__input {
                height: 1.2em !important;
            }
        }
    }

    button {
        display: block;
        width: 80%;
        margin: 80px auto 0;
        height: 45px;
        background-color: @priColor;
        border-radius: 45px;
        color: #fff;
        .font-dpr(16px);
    }
</style>